<template>
  <div class="bannerNav" @mouseleave="out">
    <div class="nav_main" :class="{ active: flag }">
      <div class="nav_logo">
        <p>
          <router-link to="/">VIVO</router-link>
        </p>
      </div>
      <div class="nav_contain">
        <ul>
          <li v-for="item in navList[0]" @mouseover="over(item)" :key="item.id">
            <router-link :to= item.name >{{ item.name }}系列</router-link>
          </li>
          <li>
            <router-link to="/shopmall">商城</router-link>
          </li>
          <li>
            <router-link to="">服务</router-link>
          </li>
        </ul>
      </div>
      <div class="nav_query">
        <i class="el-icon-search"></i>
      </div>
    </div>
    <!-- 二级导航栏 -->
    <el-collapse-transition>
      <div class="navTwo" v-show="flagTwo">
        <div class="box">
          <ul>
            <li v-for="item in $store.state.navTwoList" :key="item.id">
              <div class="imgbox">
                <img :src="item.s_goods_photos[0].path" alt="" />
              </div>
              <p>{{ item.name }}</p>
            </li>
          </ul>
          <div class="button">
            <ul>
              <li>
                <i class="el-icon-chat-dot-square">
                  全部{{ $store.state.title }}机型
                </i>
              </li>
              <li>|</li>
              <li>
                <i class="el-icon-copy-document"
                  >对比{{ $store.state.title }}机型</i
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import { Shoptext, adminLogin, Shopimg } from "../api/test.js";
export default {
  name:"navTwo",
  created() {
    adminLogin({
      phone: "13242998652",
      password: "123456",
    }).then((res) => {
      sessionStorage.setItem("token", res.data.result.token);
      Shoptext({
          project_id: 149,
      }).then((res) => {
        this.navList.push(res.data.result[0].children);
        this.$store.commit('leftnav',res.data.result[2].children)
      });
    });
  },
  data() {
    return {
      flag: false,
      flagTwo: false,
      top: 0,
      navList: [],
      navName: "",
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      this.top = window.scrollY;
      if (this.top > 40) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    over(item) {
      this.flagTwo = true;
      this.flag = true;
      // console.log(item);

      if (JSON.parse(sessionStorage.getItem(item.name))) {
        this.$store.state.navTwoList = JSON.parse(
          sessionStorage.getItem(item.name)
        );
        this.$store.state.title = item.name;
      } else {
        Shopimg({
          project_id: 149,
          classify_id: item.id,
        }).then((res) => {
          // console.log(res);
          this.$store.state.navTwoList = res.data.result.rows;
          this.$store.state.title = item.name;
          sessionStorage.setItem(
            item.name,
            JSON.stringify(res.data.result.rows)
          );
        });
      }
    },
    out() {
      this.flagTwo = false;
    },
  },
};
</script>

<style lang="scss">
.navTwo {
  z-index: 999;
  width: 100%;
  height: 350px;
  background-color: #fff;
  position: absolute;
  top: 80px;
  .box {
    ul {
      height: 60%;
      display: flex;
      justify-content: center;
      text-align: center;
      li {
        .imgbox {
          margin: 30px 20px;
          background-color: #f7f8fa;
          border-radius: 20%;
          width: 150px;
          height: 150px;
          img {
            width: 40%;
          }
        }
      }
    }
  }

  .button {
    background-color: #f7f8fa;
    width: 300px;
    height: 50px;
    margin: 0 auto;
    line-height: 50px;
    border-radius: 100px;
    ul {
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
    }
  }
}
.bannerNav {
  z-index: 999;
  position: sticky;
  top: 0;
}
.nav_main {
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // width: 100%;
  height: 80px;
  background-color: transparent;
  transition: all 1s;
  .nav_logo {
    p {
      a {
        font-size: 40px;
        text-decoration: none;
        color: #000;
        font-weight: 700;
      }
    }
    p:hover {
      a {
        color: #415fff;
        transition: all 0.5s;
      }
    }
  }
  .nav_contain {
    width: 55%;
    ul {
      display: flex;
      justify-content: space-between;
      li {
        line-height: 80px;
        a {
          color: black;
          text-decoration: none;
          font-size: 14px;
        }
      }
      li:hover {
        a {
          color: #415fff;
          transition: all 0.5s;
        }
      }
    }
  }
  .nav_query {
    margin-right: 50px;
    font-size: 20px;
    cursor: pointer;
    :hover {
      color: #415fff;
      transition: all 0.5s;
    }
  }
}
.active {
  background-color: white;
}
</style>